<template>
  <div class="swiper-container" id="rotation">
    <div class="swiper-wrapper">
      <div class="swiper-slide bg" v-for="(item,i) in bannerData" :key="i"
        :style="{backgroundImage:'url('+item.img+')'}">
        <div class="container">
          <div class="swiper-content">
            <div class="swiper-e">{{item.EnglishName}}</div>
            <div class="swiper-title" v-html="item.title"></div>
            <div class="swiper-d" v-html="item.describes"></div>
            <el-button type="success" round @click="goIn(item.href)">{{item.btnName}}</el-button>
          </div>
          <div class="btn">
            <div class="iconfont icon-houtui-copy-copy" id="rotation_prev"></div>
            <div class="iconfont icon-houtui-copy" id="rotation_next"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Swiper, Navigation, Pagination, Autoplay, EffectFade } from 'swiper'
import 'swiper/swiper-bundle.css'
import './style.css'
export default {
  name: "Banner",
  props: {
    bannerData: {
      type: Array,
      default () {
        return [
          {},
          {}
        ]
      }
    }
  },
  data () {
    return {
      btn: [
        { names: '艺术涂料 +' },
        { names: '了解品牌 +' },
        { names: '艺术墙艺 +' }
      ]
    }
  },
  methods: {
    goIn (hrefs) {

      window.location.href = hrefs
      // self.location.href = hrefs
    }
  },
  created () {
  },
  mounted () {
    console.log(this.bannerData)
    Swiper.use([Autoplay, Navigation, Pagination, EffectFade]);
    //实现按钮点击切换以及轮播的效果
    new Swiper('#rotation', {
      autoplay: {
        delay: 5000,
        disableOnInteraction: false,
      },
      // loopAdditionalSlides : 3,
      // effect: 'fade',
      allowTouchMove: false,
      fadeEffect: {
        crossFade: true
      },
      navigation: {
        nextEl: '#rotation_next',
        prevEl: '#rotation_prev',
      },
    });

  },
  watch: {

  }

}
</script>
<style lang="less" scoped>
.swiper-container {
  width: 100%;
  // height: 670px;
  background-color: #007455;
}
.swiper-wrapper {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 300ms;
  // transform: scale(0.8);
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1);
}
.text {
  background-color: aquamarine;
  width: 400px;
  height: 400px;
}

.swiper-bg {
  width: 100%;
  height: 100%;
  // background: url(http://r4kwyi39b.hd-bkt.clouddn.com/banner1.png) center center;
}
.container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 5rem;
  .swiper-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .swiper-e {
      font-size: 1rem;
      color: #60a030;
    }
    .swiper-e::after {
      content: "";
      display: block;
      width: 10rem;
      height: 1px;
      background: #60a030;
      margin: 10px 0 20px;
    }
    .swiper-title {
      color: #fff;
      font-size: 2.3rem;
      line-height: 3rem;
      text-align: initial;
      margin-bottom: 24px;
    }
    .swiper-d {
      color: #fff;
      font-size: 0.8rem;
      line-height: 1.6rem;
      text-align: initial;
      margin-bottom: 24px;
    }
    .el-button {
      border: 1px solid #fff !important;
    }
    .el-button:hover {
      border: 1px solid #60a030 !important;
    }
  }
  .btn {
    display: flex;
    flex-direction: column;
    padding-bottom: 3.6rem;
    .icon-houtui-copy-copy {
      color: #fff;
      font-size: 26px !important;
      // text-align: center;
    }
    .icon-houtui-copy-copy::after {
      content: "";
      display: block;
      width: 4.5rem;
      height: 1px;
      background: #fff;
      margin: 15px auto 1px;
    }
    .icon-houtui-copy {
      text-align: center;
      // transform: rotate(180deg);
      font-size: 26px !important;
      color: #fff;
      margin-top: 10px;
    }
    .icon-houtui-copy-copy::before,
    .icon-houtui-copy::before {
      cursor: pointer;
    }
    .icon-houtui-copy-copy:hover,
    .icon-houtui-copy:hover {
      color: #60a030;
    }
  }
}
.bg {
  background-repeat: no-repeat;
  background-position: center 0;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.containers {
  max-width: 1200px;
  min-width: 1200px;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;

  .icon-houtui-copy::after {
    content: "";
    display: block;
    width: 5rem;
    height: 2px;
    // background: #fff;
  }
  .icon-houtui-copy-copy::before,
  .icon-houtui-copy::before {
    cursor: pointer;
  }
  .icon-houtui-copy-copy:hover,
  .icon-houtui-copy:hover {
    color: #60a030;
  }
}
</style>
